<template>
  <view class="classify">
    <view class="nav1">
      <view @click="godetail">
        <image class="image" src="../../static/image/返回.png" mode=""></image>
      </view>
      <view class="inp">
        <u-search placeholder="商品搜索" :show-action="false"></u-search>
        <button class="btn">搜索</button>
      </view>

      <!-- 5个盒子 -->
      <view class="box5" @click="godetail">
        <u-grid :col="5">
          <u-grid-item>
            <image src="../../static/image/水果.png" style="width: 50px; height: 50px;" mode=""></image>
            <view class="grid-text">水果</view>
          </u-grid-item>
          <u-grid-item>
            <image src="../../static/image/蔬菜.png" style="width: 50px; height: 50px;" mode=""></image>
            <view class="grid-text">蔬菜</view>
          </u-grid-item>
          <u-grid-item>
            <image src="../../static/image/肉类.png" style="width: 50px; height: 50px;" mode=""></image>
            <view class="grid-text">肉类</view>
          </u-grid-item>
          <u-grid-item>
            <image src="../../static/image/海鲜.png" style="width: 50px; height: 50px;" mode=""></image>
            <view class="grid-text">海鲜</view>
          </u-grid-item>
          <u-grid-item>
            <image src="../../static/image/熟食.png" style="width: 50px; height: 50px;" mode=""></image>
            <view class="grid-text">熟食</view>
          </u-grid-item>
        </u-grid>
      </view>
      <!-- 轮播 -->
      <view class="content">
        <view class="left">
          <!-- 轮播 -->
          <view class="swipe">
            <scroll-view scroll-y="true" style="height: 1200rpx;" :scroll-into-view="id" scroll-with-animation="true">
              <view class="border" style="height: 150rpx; text-align: center; line-height: 150rpx;" id="a1">推荐</view>
              <view class="border" style="height: 150rpx; text-align: center; line-height: 150rpx;" id="a2">热销爆款</view>
              <view class="border" style="height: 150rpx; text-align: center; line-height: 150rpx;" id="a3">新品</view>
              <view class="border" style="height: 150rpx; text-align: center; line-height: 150rpx;" id="a4">绿叶菜</view>
              <view class="border" style="height: 150rpx; text-align: center; line-height: 150rpx;" id="a5">番茄</view>
              <view class="border" style="height: 150rpx; text-align: center; line-height: 150rpx;" id="a6">茄果</view>
              <view class="border" style="height: 150rpx; text-align: center; line-height: 150rpx;" id="a7">玉米</view>
              <view class="border" style="height: 150rpx; text-align: center; line-height: 150rpx;" id="a8">花菜</view>
              <view class="border" style="height: 150rpx; text-align: center; line-height: 150rpx;" id="a9">豆制品</view>
              <view class="border" style="height: 150rpx; text-align: center; line-height: 150rpx;" id="a10">菌菇</view>
              <view class="border" style="height: 150rpx; text-align: center; line-height: 150rpx;" id="a11">有机蔬菜</view>
              <view class="border" style="height: 150rpx; text-align: center; line-height: 150rpx;" id="a12">进口蔬菜</view>
            </scroll-view>
          </view>
        </view>
        <view class="right">
          <image class="image1" src="../../static/image/海鲜图片.png" mode="aspectFill"></image>
          <view class="box4">
            <view class="today">
              <goods1 :title="require('../../static/image/优质小白菜.png')" title1="优质小白菜" title2="基地直供 | 绿色培植 | 新鲜采摘"
                title3="基地直采" title4="￥9.98" title5="/斤">
                <template #t1>券</template>
                <template #t2>减3元</template>
              </goods1>
            </view>
            <view class="today">
              <goods1 :title="require('../../static/image/生菜.png')" title1="高山精选本地生菜" title2="基地直供 | 绿色培植 | 新鲜采摘"
                title3="高山有机" title4="￥5.9" title5="/斤">
                <template #t1>券</template>
                <template #t2>减2元</template>
              </goods1>
            </view>
            <view class="today">
              <goods1 :title="require('../../static/image/大白菜.png')" title1="优质小白菜" title2="基地直供 | 绿色培植 | 新鲜采摘"
                title3="主食必备" title4="￥3.79" title5="/斤">
                <template #t1>券</template>
                <template #t2>减3元</template>
              </goods1>
            </view>
            <view class="today">
              <goods1 :title="require('../../static/image/苦瓜.png')" title1="优质小白菜" title2="基地直供 | 绿色培植 | 新鲜采摘"
                title3="多汁香甜" title4="10.47" title5="/斤">
                <template #t1>券</template>
                <template #t2>减1元</template>
              </goods1>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
  import goods1 from '../../components/goods1.vue'
  export default {
    components: {
      goods1
    },
    data() {
      return {
        current: 0,
        id: 'a1'
        // scrollTop: 0,
        // old: {
        //   scrollTop: 0
        // }
      }
    },
    methods: {
      godetail() {
        uni.navigateTo({
          url: "/pages/detail/detail"
        })
      },
      upper: function(e) {
        console.log(e)
      },
      lower: function(e) {
        console.log(e)
      },
      scroll: function(e) {
        console.log(e)
        this.old.scrollTop = e.detail.scrollTop
      },
    }
  }
</script>

<style lang="scss">
  .classify {
    width: 100%;

    //导航栏
    .nav1 {
      background: linear-gradient(to bottom right, #e1f7eb, white);
      width: 100%;
      height: 140px;

      .image {
        margin-left: 20px;
        margin-top: 20px;
        width: 30px;
        height: 30px;
      }

      // 搜索框
      .inp {
        width: 90%;
        margin-top: 130rpx;
        position: absolute;
        left: 40rpx;
        top: 0rpx;

        .btn {
          color: #ffffff;
          font-size: 20rpx;
          width: 100rpx;
          height: 50rpx;
          border-radius: 50rpx;
          background: linear-gradient(to bottom right, green, white);
          position: absolute;
          top: 6rpx;
          right: 2rpx;
        }
      }
    }

    // 5个选项
    .box5 {
      width: 90%;
      margin: auto;
      margin-top: 123rpx;
    }

    // 轮播
    .content {
      width: 90%;
      margin: auto;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;

      .left {
        width: 30%;
        border-radius: 10px;

        .swipe {
          background-color: #fafafa;
          scroll-view {
            view:hover {
              color: #3eb874;
            }
            .border:hover{
              border-left: 10rpx solid #46a274;
            }
          }
        }
      }

      .right {
        width: 65%;

        .image1 {
          width: 100%;
          height: 70px;
        }

        .box4 {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          .today {
            width: 100%;
          }
        }
      }
    }
  }
</style>